<template>
	<div>
		<el-dialog title="新增服务" :visible="visible" center :before-close="handerClose">
			<el-form :model="updateService" :rules="rules" ref="updateService" label-width="100px" class="demo-ruleForm">
				<el-form-item label="服务名称" prop="name">
					<el-input v-model="updateService.name"></el-input>
				</el-form-item>
				<el-form-item label="服务类型" prop="type">
					<el-input v-model="updateService.type"></el-input>
				</el-form-item>
				<el-form-item label="适用规格" prop="scope">
					<el-input v-model="updateService.scope"></el-input>
				</el-form-item>
				<el-form-item label="服务规格" prop="profiles">
					<el-input v-model="updateService.profiles"></el-input>
				</el-form-item>
				<el-form-item label="服务耗时" prop="time">
					<el-input v-model="updateService.time"></el-input>
				</el-form-item>
				<el-form-item label="服务员等级" prop="level">
					<el-input v-model="updateService.level"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="updateService.price"></el-input>
				</el-form-item>

				<el-form-item v-for="(item, index) in updateService.scheduling" :label="'排期' + index" :key="item.key" :prop="'scheduling.' + index + '.value'"
				 :rules="{required: true, message: '排期不可为空', trigger: 'blur'}">
					<el-date-picker v-model="item.value" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期"
					 format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['08:00:00', '09:00:00']">
					</el-date-picker>
					<el-button @click.prevent="removeDomain(item)">删除</el-button>
				</el-form-item>


				<el-form-item>
					<el-button @click="addDomain">新增排期</el-button>
					<el-button type="primary" @click="submitForm('updateService')">立即更新</el-button>
					<el-button @click="resetForm('updateService')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		updateService
	} from "@/service/service.js"
	export default {
		data() {
			return {
				input: '',
				rules: {
					name: {
						required: true,
						message: '请输入服务名称',
						trigger: 'blur'
					},
					type: {
						required: true,
						message: '请输入服务类型',
						trigger: 'blur'
					},
					scheduling: {
						required: true,
						message: '请选择服务排期',
						trigger: 'blur'
					},
					scope: {
						required: true,
						message: '请输入适用规格',
						trigger: 'blur'
					},
					profiles: {
						required: true,
						message: '请输入服务规格',
						trigger: 'blur'
					},
					time: {
						required: true,
						message: '请输入服务耗时',
						trigger: 'blur'
					},
					level: {
						required: true,
						message: '请输入服务员等级',
						trigger: 'blur'
					},
					price: {
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					},
				}
			};
		},
		computed: {
			...mapState("service", ["visible", "updateService"])
		},
		methods: {
			...mapActions("service", ["show"]),
			...mapMutations("service", ["setVisible"]),
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.setVisible(false)
						updateService(this.updateService._id, this.updateService)
						this.show();
					} else {
						return false;
					}
				});
			},
			removeDomain(item) {
				var index = this.updateService.scheduling.indexOf(item)
				if (index !== -1) {
					this.updateService.scheduling.splice(index, 1)
				}
			},
			addDomain() {
				this.updateService.scheduling.push({
					value: '',
					key: Date.now()
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handerClose() {
				this.setVisible(false)
			}
		}
	};
</script>

<style>
</style>
